/*
  学习目标：性能优化- React.PureComponent
  作用： 在内部自动实现了 shouldComponentUpdate 钩子，不需要手动比较
   直接对比props的新旧值，有改变过就更新，没改变过就不更新
   等于手动在 shouldComponentUpdate 写了判断逻辑
   不建议滥用纯组件，例如组件是写死的(不需要用到数据),那么直接return false 会更好
*/

import React from 'react';
export default class App extends React.Component {
  state = {
    count: 0,
    msg: '我是msg',
    title: '我是title',
    age: 20,
  };

  render() {
    return (
      <div>
        <h1>数量： {this.state.count}</h1>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          点我修改数量
        </button>
        <button onClick={() => this.setState({ msg: this.state.msg + '~' })}>
          点我修改msg
        </button>
        <button
          onClick={() => this.setState({ title: this.state.title + '~' })}
        >
          点我修改title
        </button>

        <Son count={this.state.count} msg={this.state.msg}></Son>
      </div>
    );
  }
}

// 直接对比props的新旧值，有改变过就更新，没改变过就不更新
// 等于手动在 shouldComponentUpdate 写了判断逻辑
// 不建议滥用纯组件，例如组件是写死的(不需要用到数据),那么直接return false 会更好
class Son extends React.PureComponent {
  // shouldComponentUpdate(nextProps) {
  //   console.log('shouldComponentUpdate -----> ', nextProps);
  //   console.log('this.props -----> ', this.props);
  // if (
  //   this.props.count === nextProps.count &&
  //   this.props.msg === nextProps.msg
  // ) {
  //   // 数据没改变过，那就不需要更新
  //   return false;
  // } else {
  //   // 数据改变，更新
  //   return true;
  // }
  // }
  componentDidUpdate() {
    console.log('Son组件更新了');
  }
  render() {
    return <div>我是Son</div>;
  }
}
